<!-- 从业者-职业竞赛-参赛者风采-->
<template>
	<view class="container" :style="{ backgroundImage: `url(${backgroundImageUrl})`}" >
		<!-- 顶部竞赛名称 -->
		<view class="competition-header">
			<text class="competition-name">{{ jscszFilter.bjs_name}} ></text>
			
		</view>

		<!-- 顶部用户信息区域 -->
		<view class="user-info" @click="navigateTo('registerthree')">
			<!-- 头像 -->
			<view class="info-left">
				<u-avatar size="100" mode="square" :src="jscszFilter.user_header_uri[0].url"></u-avatar>
			</view>
			<view class="info-right">
				<view class="company-name">{{ jscszFilter.user_name }}</view>
				<text class="edit-info" @click="editUserInfo">编辑个人信息</text>
			</view>
			<view class="info-kh">
				<text class="competition-name">{{ jscszFilter.user_cskh}}</text>
			</view>
      
		</view>


		<!-- 用户信息头部 -->
		<view class="user-header">
			<!-- 人气和票数 -->
			<view class="stats">
				<view class="stat-item">
					<text class="stat-value">5</text>
					<text class="stat-label">人气排名</text>
				</view>
				<view class="stat-item">
					<text class="stat-value">{{ jscszFilter.user_piaoshu }}</text>
					<text class="stat-label">获得票数</text>
				</view>
			</view>
			<!-- 个人简介 -->
			<view class="card">
				<!-- <view class="section-title">个人简介</view> -->
				<view class="bio-content">
					{{jscszFilter.user_desc}}
				</view>
			<!-- 视频介绍 -->
			<view class="video-container">
				<!-- <video> 默认宽度 300px、高度 225px，可通过 css 设置宽高 -->
				<video id="myVideo" class="myVideo" object-fit="fill" :src="jscszFilter.user_video_uri[0].url"
				@error="videoErrorCallback"  enable-danmu danmu-btn controls></video>
			</view>
			</view>
		</view>
		
		<!-- 底部操作按钮 -->
		<view class="action-buttons">
		  <u-button
			 open-type="share"
		    plain 
		    shape="circle" 
		    @click="fxUrlLine"
				:customStyle="customStyle"
		    class="back-btn"
		  >
		    拉票分享可赚积分
		  </u-button>
		  <u-button 
			  v-if="jscszFilter.user_piaoshu == 0"
		    type="primary" 
		    shape="circle" 
		    @click="addTouPiao"
				:customStyle="customStyleBut"
		    class="detail-btn"
		  >
		    点赞拉票
		  </u-button>
			<u-button
			  v-else
			  type="primary" 
			  shape="circle" 
			  @click="addTouPiao"
				:customStyle="customStyleyt"
			  class="detail-btn"
			>
			  已投票
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				backgroundImageUrl: 'https://www.xzbky.com/static/kangyangtrain/1000/bg_grfc@2x.png', // 网络图片地址
				customStyle: {
					// "backgroundColor": "#03B8CD",
					"color": "#03B8CD"
				},
				customStyleBut: {
					"color": "#ffffff",
					"backgroundColor": "#F39742",
				},
				customStyleyt: {
					"color": "#ffffff",
					"backgroundColor": "#bfbfbf",
				},
				userInfo: {
					avatar: 'https://cdn.uviewui.com/uview/template/niannian.jpg',
					name: '参赛者姓名',
					photo: ''
				},
				jscode: '',
				jszList:[] ,///参赛者数据
				tponemax: 0, ////投同一参赛者最大投票数
			}
		},
		computed: {
			jscszFilter() {
				return  this.jszList.filter(item => item.user_code === uni.getStorageSync('usercode'))[0]
			}
		},
		onLoad(options) {
			this.jscode = options.jscode
			this.tponemax = options.tponemax
		},
		onShow() {
			this.selectBjsUser()
		},
		methods: {
			// 根据竞赛code获取参加的基础竞赛选手列表
			selectBjsUser() {				
				// 根据竞赛code获取参加的基础竞赛选手列表
					this.$u.api.querybjsuserlist({
						"bjscode": this.jscode,
						"pagesize": 1000 //#分页查询，每页显示的记录数
					}).then(res => {
						console.log('参赛者：',res )
						this.jszList = res.data.base_info
						console.log('参赛者-1：',this.jscszFilter)
					})
			},
			// 拉票分享，复制分享链接
			fxUrlLine() {
				this.$u.api.createyqmlink({
					"usercode": uni.getStorageSync('usercode'), //#用户code
					"params":{"linkcode":this.jscode, "ywcode":"bsbm"}, ///要传入的参数，ywcode:  团队邀请考证报名：kzbm  ,  比赛邀请： bsbm   直播：zbbm   课程：kcbm
				}).then(res => {
					console.log('生成邀请链接：', res)
					this.invitationLink = res.data.base_info
					uni.setClipboardData({
					  data: this.invitationLink,
					  success: () => {
					    uni.showToast({
					      title: '链接已复制',
					      icon: 'success'
					    });
					  }
					});
				})
			},
			
			// 投票
			addTouPiao() {
				this.$u.api.addjstp({
					"bjscode": this.userInfo.bjs_code, //#竞赛code
					"usercode": this.userInfo.user_code,//#参加竞赛的用户code
					"cyjstpusercode": uni.getStorageSync('usercode') ////投票的用户code
				}).then(res => {
					console.log('toupiao:', res)
					
				})
			},
			
			editUserInfo() {
				uni.navigateTo({
					url: `/pages/Practitioner/prizeFight/fightEdit?jscode=${this.jscode}`
				})
			},
			shareForVotes() {
				uni.showToast({
					title: '分享拉票',
					icon: 'none'
				})
				// 实际项目中调用分享API
			},
			earnPoints() {
				uni.navigateTo({
					url: '/pages/points/earn'
				})
			},
			voteForMe() {
				uni.showToast({
					title: '感谢您的投票',
					icon: 'none'
				})
				// 实际项目中调用投票API
			},
			// 核心：微信会在用户点击时调用这里
			///要传入的参数，ywcode:  团队邀请考证报名：kzbm  ,  比赛邀请： bsbm   直播：zbbm   课程：kcbm
			onShareAppMessage(options) {
					// 可区分 button 还是右上角菜单
					console.log('分享来源：', options.from,this.invitationLink) // 'button' / 'menu'			
					return {
						title: '分享李长邦康养人才服务',                // 分享卡片标题
						path: `/pages/Practitioner/prizeFight/fightDetails?linkcode=${this.jscode}&&ywcode=bsbm`, // 一定带 /
						imageUrl: '',             // 自定义图片，留空用默认截图
						promise: new Promise(resolve => {
							// 如果想异步拉取数据再返回，在这里 resolve
							resolve({
								title: this.shareTitle,
								path: `/pages/Practitioner/prizeFight/fightDetails?linkcode=${this.jscode}&&ywcode=bsbm`,
								imageUrl: ''
							})
						})
					};
				},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
		padding-bottom: 40rpx;
		background-color: #f7f7f7;
		min-height: 93vh;
	}

	.competition-header {
		padding: 20rpx 0;

		.competition-name {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
	}

	// 头像
	.user-info {
		align-items: center;
		// margin-bottom: 30rpx;
		display: flex;
		// justify-content: space-between;	
		flex-direction: column;
	}

	.info-right {
		flex: 1;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		// justify-content: center;
		justify-content: flex-end;
		margin-left: 140px;
		margin-bottom: 10px;
	}
	
	.info-kh {
		font-size: 36rpx;
		font-weight: bold;
		padding-bottom: 20rpx;
	}

	.company-name {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-right: 50px;
	}


	.edit-info {
		font-size: 24rpx;
		background-color: #ffffff;
		color: #03B8CD;
		padding: 8rpx 16rpx;
		border: 1rpx solid #ffffff;
		border-radius: 20rpx;
	}

	.user-header {
		background-color: #b8b8b8;
		border-radius: 12rpx;
		// padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);


		.stats {
			background-color: #F1F7F7;
			display: flex;
			justify-content: space-around;
			padding: 30rpx 0;

			.stat-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.stat-value {
					font-size: 48rpx;
					font-weight: bold;
					color: #000000;
					// margin-bottom: 10rpx;
				}

				.stat-label {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}

	.card {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 10rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

		.section-title {
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
			color: #333;
		}

		.bio-content {
			font-size: 26rpx;
			color: #666;
			line-height: 1.6;
			height: 200rpx;
		}
	}	
  .video-container {
		.myVideo {
			width: 100%;
			height: 200px;
			
		}
	}




	.action-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;

		.action-btn {
			width: 30%;
			height: 80rpx;

			/deep/ .u-btn {
				height: 100%;
				font-size: 26rpx;
			}
		}
	}
	
	.action-buttons {
	  display: flex;
	  justify-content: space-between;
	  margin-top: 20rpx;
	  
	  .back-btn {
	    width: 48%;
	  }
	  
	  .detail-btn {
	    width: 48%;
	  }
	}
</style>